<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-08-30 14:17:45
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2023-02-14 17:07:29
 * @FilePath: \zhmc\pc\sys\src\views\UserCenter\SysRole\components\DataSet.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, PropType, watch, reactive } from 'vue'
import { ElTree, ElTabs, ElTabPane, ElLoading, ElSelectV2 } from 'element-plus'
import { changeDa, changeApp, changeAuthority } from '@/utils/lee'
import { ucAppListApi } from '@/api/uc/app'
import { ucDaListApi } from '@/api/uc/data'
import { ucRoleDaSeeApi } from '@/api/uc/roleDa'
import { ucRoleAppSeeApi } from '@/api/uc/roleApp'

// 定义一些常用数据
const data = reactive<any>({
  appData: [], // 所有应用
  myRoleApp: [], // 当前角色的应用权限
  daData: [], // 所有功能
  myRoleDa: [], // 当前角色的菜单权限
  parentRoleDa: [], // 上级角色的菜单权限
  form: {},
  newAppData: [],
  newFormData: {},
  tabValue: ''
})

const treeRef = ref<ComponentRef<typeof ElTree>>()

const ids = ref({})

//首先拿到行数据
const props = defineProps({
  formData: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  }
})

watch(
  () => props.formData,
  (value) => {
    if (!value) return
    data.newFormData = value
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  getForm() {
    return { app_id: data.tabValue, ids: ids.value }
  }
})

// 所有应用
const getAllApp = async () => {
  let res = await ucAppListApi({})
    .catch(() => {})
    .finally(() => {})
  if (res) {
    data.appData = res.data
  }
}

// 当前角色应用权限
const getMyRoleApp = async () => {
  let res = await ucRoleAppSeeApi({ app_id: data.tabValue, role_id: data.newFormData.role_id })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    data.myRoleApp = res.data
  }
}

// 所有菜单
const getAllDa = async () => {
  let res = await ucDaListApi({ app_id: data.tabValue })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    data.daData = res.data
  }
}

// 当前角色菜单权限
const getMyRoleMenu = async () => {
  let res = await ucRoleDaSeeApi({ app_id: data.tabValue, role_id: data.newFormData.role_id })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    data.myRoleDa = res.data
  }
}

// 上级角色菜单权限
const getParentRoleDa = async () => {
  let res = await ucRoleDaSeeApi({ role_id: data.newFormData.parent_id, app_id: data.tabValue })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    data.parentRoleDa = res.data
  }
}

const handleChange = async () => {
  const loadingMain = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  // 获取所有菜单权限
  await getAllDa()
  if (data.newFormData.parent_id != 0) {
    // 获取上级角色的菜单权限
    await getParentRoleDa()
    // 赋值
    data.newDaData = changeDa(data.daData, data.parentRoleDa)
  } else {
    // 没有上级角色就是全部菜单
    data.newDaData = changeDa(data.daData)
  }

  // 查看当前角色的应用权限
  await getMyRoleMenu()
  // 赋值
  ids.value = changeAuthority(data.myRoleDa, 'da_id')
  loadingMain.close()
}

// 初始化
const init = async () => {
  const loadingMain = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  // 获取所有应用权限
  await getAllApp()
  // 获取这个角色的应用权限
  await getMyRoleApp()
  data.newAppData = changeApp(data.appData, data.myRoleApp)
  if (data.newAppData.length > 0) {
    // 给页签赋值第一个应用
    data.tabValue = data.newAppData[0]['app_id']
    // 获取所有菜单权限
    await getAllDa()
    if (data.newFormData.parent_id != 0) {
      // 获取上级角色的菜单权限
      await getParentRoleDa()
      data.newDaData = changeDa(data.daData, data.parentRoleDa)
    } else {
      // 没有上级角色就是全部菜单
      data.newDaData = changeDa(data.daData)
    }
    // 查看当前角色的应用权限
    await getMyRoleMenu()
    // 赋值
    ids.value = changeAuthority(data.myRoleDa, 'da_id')
  }
  loadingMain.close()
}
init()
</script>

<template>
  <div>
    <ElTabs
      v-if="data.newAppData.length > 0"
      v-model="data.tabValue"
      type="card"
      class="demo-tabs"
      @tab-change="handleChange"
    >
      <ElTabPane
        :label="item.app_name"
        :name="item.app_id"
        v-for="(item, index) in data.newAppData"
        :key="index"
      />
    </ElTabs>
    <ElTree
      ref="treeRef"
      :data="data.newDaData"
      :props="{ children: 'children', label: 'da_name' }"
      :expand-on-click-node="false"
      default-expand-all
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <ElSelectV2
              v-model="ids[data.da_id]"
              :options="data.options"
              placeholder="选择权限"
              size="small"
            />
          </span>
        </span>
      </template>
    </ElTree>
  </div>
</template>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
